<template>
  <div class="content">
    <!-- 顶部搜索栏 -->
    <div class="top">
      <a-card :bordered="false">
        <a-popconfirm
          title="确认删除？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="removeBachById"
          @cancel="cancel"
        >
          <a-button :disabled="!hasSelected" type="primary" danger ghost
            ><DeleteOutlined />批量删除</a-button
          >
        </a-popconfirm>
      </a-card>
    </div>

    <!-- 表格数据展示 -->
    <div class="table">
      <a-card :bordered="false">
        <div>
          <a-table
            :row-selection="{
              selectedRowKeys: state.selectedRowKeys,
              onChange: onSelectChange,
            }"
            :data-source="data"
            :pagination="false"
            :loading="loading"
          >
            <a-table-column
              fixed="left"
              key="name"
              title="名称"
              data-index="name"
              :ellipsis="true"
            />
            <a-table-column
              key="userName"
              title="操作员"
              data-index="userName"
              :ellipsis="true"
            >
              <template #default="{ record }">
                <a-tag color="#F56C6C"
                  ><span style="font-size: 14px; color: #fff">{{
                    record.userName
                  }}</span></a-tag
                >
              </template>
            </a-table-column>
            <a-table-column
              key="method"
              title="方法"
              data-index="method"
              :ellipsis="true"
            />
            <a-table-column
              key="url"
              title="URL"
              data-index="url"
              :ellipsis="true"
            />
            <a-table-column
              :ellipsis="true"
              key="ip"
              title="IP"
              data-index="ip"
            />
            <a-table-column
              key="time"
              title="操作时间"
              data-index="time"
              :ellipsis="true"
            />
            <a-table-column fixed="right" key="message" title="操作">
              <template #default="{ record }">
                <div style="display: flex">
                  <div>
                    <a-button
                      @click="viewException(record.message)"
                      type="link"
                      ghost
                      >异常信息</a-button
                    >
                  </div>
                </div>
              </template>
            </a-table-column>
          </a-table>
        </div>
        <!-- 分页 -->
        <div
          style="
            height: 40px;
            width: 100%;
            margin-top: 30px;
            display: flex;
            justify-content: center;
          "
        >
          <a-pagination
            v-model:current="pageNo"
            v-model:page-size="pageSize"
            :total="total"
            @change="handlePageChange"
            :show-total="(total) => `共 ${total} 条`"
          />
        </div>
      </a-card>
    </div>

    <!-- 异常信息展示 -->
    <div>
      <a-drawer
        title="异常信息"
        placement="bottom"
        :open="open"
        @close="closeDrawer"
      >
        <div style="height: auto; width: 100%">
          <p
            style="
              font-size: 18px;
              color: #00000;
              letter-spacing: 2px;
              word-wrap: break-word;
            "
          >
            {{ exception }}
          </p>
        </div>
      </a-drawer>
    </div>
  </div>
</template>

<script setup>
import { DeleteOutlined } from "@ant-design/icons-vue";
import { ref, reactive, computed, onMounted } from "vue";
import { message } from "ant-design-vue";
import { list, removeBatchByKeys } from "@/api/exceptionlog.js";
import { useAdminStore } from "@/stores/admin";
const data = ref([]);
const loading = ref(true);
const adminStore = useAdminStore();
onMounted(() => {
  setTimeout(() => {
    getOperlist();
    loading.value = false;
  }, 1000);
});

const total = ref(0);
const pageNo = ref(1);
const pageSize = ref(10);
const isAdmin = ref(false);
if (adminStore.admin.role === "管理员") {
  isAdmin.value = true;
}
//异步请求管理员数据
function getOperlist() {
  list(pageNo.value, pageSize.value).then((res) => {
    if (res.code === 200 && res.data != null) {
      data.value = res.data.data;
      total.value = res.data.total;
    }
  });
}


//监听分页变化
function handlePageChange(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  setTimeout(() => {}, 1000);
  getOperlist();
}

//管理员取消删除回调操作
function cancel() {
  message.warning("取消删除！");
}
//存储批量管理员id
const state = reactive({
  selectedRowKeys: [],
});
//当有一个或多个管理员被选中时触发按钮
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
//批量删除管理员
const removeBachById = () => {
  setTimeout(() => {
    state.selectedRowKeys = [];
  }, 1000);
  //删除后做操作
  console.log(state.selectedRowKeys);
  removeBatchByKeys(state.selectedRowKeys).then((res) => {
    if (res.code === 200) {
      message.success("删除成功！");
      //重新加载分页数据
      getOperlist();
    }
  });
};
//当选中行改变时触发
const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};

const open = ref(false);
const exception = ref("");
function viewException(message) {
  exception.value = message;
  open.value = true;
}

function closeDrawer() {
  open.value = false;
}
</script>

<style scoped>
.options {
  margin-top: 10px;
}

.table {
  margin-top: 10px;
}

.avatar-uploader > .ant-upload {
  width: 50px;
  height: 50px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.paginAtion {
  padding-top: 20px;
  padding-left: 310px;
  margin-bottom: 20px;
}
</style>>